<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Excel Editor</title>
    <script src="../js/xlsx.full.min.js"></script>
</head>
<body>
<div id="app">
    <button onclick="loadFile()">Load Excel</button>
    <button onclick="saveFile()">Save Excel</button>
    <table id="excelTable"></table>
</div>

<script>
    function loadFile() {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = '.xlsx,.xls';
        input.onchange = (e) => {
            const file = e.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = (event) => {
                const data = event.target.result;
                const workbook = XLSX.read(data, {type: 'binary'});
                const sheetName = workbook.SheetNames[0];
                const sheet = workbook.Sheets[sheetName];
                const json = XLSX.utils.sheet_to_csv(sheet);
                displayData(json);
            };
            reader.readAsBinaryString(file);
        };
        input.click();
    }

    function saveFile() {
        const table = document.getElementById('excelTable');
        const ws = XLSX.utils.table_to_sheet(table);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
        XLSX.writeFile(wb, 'output.xlsx');
    }

    function displayData(data) {
        const table = document.getElementById('excelTable');
        table.innerHTML = '';
        const headers = Object.keys(data[0]);
        const headerRow = document.createElement('tr');
        headers.forEach(header => {
            const th = document.createElement('th');
            th.textContent = header;
            headerRow.appendChild(th);
        });
        table.appendChild(headerRow);

        data.forEach(rowData => {
            const row = document.createElement('tr');
            headers.forEach(header => {
                const cell = document.createElement('td');
                cell.textContent = rowData[header];
                row.appendChild(cell);
            });
            table.appendChild(row);
        });
    }
</script>
</body>
</html>
